<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>图表统计</title>
  <link rel="stylesheet" href="../../static/bootstrap-3.4.1-dist/css/bootstrap.css" />
  <link rel="stylesheet" href="../../static/lib/main.css" />
  <script src="../../static/jquery-2.1.4.js"></script>
  <script type="text/javascript" src="../../static/echarts.min.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row spannel_list">
      <div class="col-sm-3 col-xs-6">
        <div class="spannel">
          <em id="total_car"></em><span>个</span>
          <b>总车辆数</b>
        </div>
      </div>
      <div class="col-sm-3 col-xs-6">
        <div class="spannel scolor01">
          <em id="total_brand"></em><span>个</span>
          <b>车辆品牌数</b>
        </div>
      </div>
      <div class="col-sm-3 col-xs-6">
        <div class="spannel scolor02">
          <em id="total_user"></em><span>人</span>
          <b>用户总数</b>
        </div>
      </div>
      <div class="col-sm-3 col-xs-6">
        <div class="spannel scolor03">
          <em id="total_order"></em><span>个</span>
          <b>订单总数</b>
        </div>
      </div>
    </div>
  </div>

  <div class="container-fluid">
    <div class="row curve-pie">
      <div class="col-lg-8 col-md-8">
        <div class="gragh_pannel" id="curve_show"></div>
      </div>
      <div class="col-lg-4 col-md-4">
        <div class="gragh_pannel" id="pie_show"></div>
      </div>
    </div>
  </div>

  <div class="container-fluid">
    <div class="column_pannel" id="column_show"></div>
  </div>
  <script>
    $.post(
            '/echarts?method=selectCount',
            function (result) {
              if (result.code == 0) {
                $('#total_car').text(result.data.totalCar);
                $('#total_brand').text(result.data.totalBrand);
                $('#total_user').text(result.data.totalUser);
                $('#total_order').text(result.data.totalOrder);
              }
            },
            'json'
    );
  </script>

  <script>
    $.post(
            '/echarts?method=selectTotalOrder',
            function (data) {
              console.log(data);
              var oChart = echarts.init(document.getElementById('curve_show'));
              var aList_all = [];
              data.forEach(function(item) {
                var newItem = {
                  'count': item.count,
                  'date': item.orderDate
                };
                aList_all.push(newItem);
              });

              let aCount = [];
              let aDate = [];

              for (var i = 0; i < aList_all.length; i++) {
                aCount.push(aList_all[i].count);
                aDate.push(aList_all[i].date);
              }

              var chartopt = {
                title: {
                  text: '月新增订单数',
                  left: 'center',
                  top: '10'
                },
                tooltip: {
                  trigger: 'axis'
                },
                legend: {
                  data: ['新增订单'],
                  top: '40'
                },
                toolbox: {
                  show: true,
                  feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                  }
                },
                calculable: true,
                xAxis: [
                  {
                    name: '日',
                    type: 'category',
                    boundaryGap: false,
                    data: aDate
                  }
                ],
                yAxis: [
                  {
                    name: '月新增订单数',
                    type: 'value'
                  }
                ],
                series: [
                  {
                    name: '新增订单',
                    type: 'line',
                    smooth: true,
                    itemStyle: { normal: { areaStyle: { type: 'default' }, color: '#f80' }, lineStyle: { color: '#f80' } },
                    data: aCount
                  }],
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(255,136,0,0.39)'
                    }, {
                      offset: .34,
                      color: 'rgba(255,180,0,0.25)'
                    }, {
                      offset: 1,
                      color: 'rgba(255,222,0,0.00)'
                    }])

                  }
                },
                grid: {
                  show: true,
                  x: 50,
                  x2: 50,
                  y: 80,
                  height: 220
                }
              };

              oChart.setOption(chartopt);
            },
            'json'
    );

    $.post(
            '/echarts?method=selectBrandCount',
            function (jsonObj) {
              console.log(jsonObj);

              var xArray = new Array();
              var yArray = new Array();
              for (var BrandCountVO of jsonObj) {
                xArray.push(BrandCountVO.name);
                yArray.push(BrandCountVO.value);
              }
              var oPie = echarts.init(document.getElementById('pie_show'));
              var oPieopt =
                      {
                        title: {
                          top: 10,
                          text: '各类手机品牌数量比',
                          x: 'center'
                        },
                        tooltip: {
                          trigger: 'item',
                          formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        color: [
                          '#FF0000', '#00FF00', '#0000FF', '#FFFF00',
                          '#FF00FF', '#00FFFF', '#FF8000', '#8000FF',
                          '#00FF80', '#FF0080', '#80FF00', '#0080FF',
                          '#FFC0C0', '#C0FFC0', '#C0C0FF', '#FFFF80',
                          '#FF80FF', '#80FFFF', '#FFA500', '#A500FF',
                          '#00FFA5', '#FF00A5', '#A5FF00', '#00A5FF',
                          '#FFD700', '#D700FF', '#00FFD7', '#FF00D7',
                          '#D7FF00', '#00D7FF', '#FF7F50', '#7F50FF',
                          '#50FF7F', '#FF507F', '#7FFF00', '#007FFF',
                          '#FF4500', '#4500FF', '#00FF45', '#FF0045',
                          '#45FF00', '#0045FF', '#FF1493', '#1493FF',
                          '#00FF14', '#FF0014', '#14FF00', '#0014FF',
                          '#FF69B4', '#69B4FF', '#B4FF69', '#FFB469',
                          '#69FFB4', '#B469FF'
                        ],
                        // legend: {
                        //   x: 'center',
                        //   top: 65,
                        //   data: xArray
                        // },
                        legend: {
                          orient: 'vertical', // 图例垂直布局
                          left: 'left' // 图例左对齐
                        },
                        toolbox: {
                          show: true,
                          x: 'center',
                          top: 35,
                          feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: {
                              show: true,
                              type: ['pie', 'funnel'],
                              option: {
                                funnel: {
                                  x: '25%',
                                  width: '50%',
                                  funnelAlign: 'left',
                                  max: 1548
                                }
                              }
                            },
                            restore: { show: true },
                            saveAsImage: { show: true }
                          }
                        },
                        calculable: true,
                        series: [
                          {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['45%', '60%'],
                            center: ['50%', '55%'],
                            data: jsonObj
                          }
                        ]
                      };
              oPie.setOption(oPieopt);

            },
            'json'
    );
    // $.post(
    //         '/echarts?method=selectBrandCount',
    //         function (jsonObj) {
    //           console.log(jsonObj);
    //
    //           var xArray = new Array();
    //           var yArray = new Array();
    //           for (var BrandCountVO of jsonObj) {
    //             xArray.push(BrandCountVO.name);
    //             yArray.push(BrandCountVO.value);
    //           }
    //           var oPie = echarts.init(document.getElementById('pie_show'));
    //           var oPieopt =
    //                   {
    //                     title: {
    //                       text: '各类车辆品牌车辆数量图',
    //                       left: 'center', // 标题居中
    //                       top: 10, // 标题距离顶部的距离
    //                       textStyle: {
    //                         color: '#333', // 标题颜色
    //                         fontSize: 16 // 标题字体大小
    //                       }
    //                     },
    //                     tooltip: {
    //                       trigger: 'item'
    //                     },
    //                     // legend: {
    //                     //   top: '5%',
    //                     //   left: 'center'
    //                     // },
    //                     legend: {
    //                       orient: 'vertical', // 图例垂直布局
    //                       left: 'left' // 图例左对齐
    //                     },
    //                     series: [
    //                       {
    //                         name: 'Access From',
    //                         type: 'pie',
    //                         radius: ['40%', '70%'],
    //                         avoidLabelOverlap: false,
    //                         itemStyle: {
    //                           borderRadius: 10,
    //                           borderColor: '#fff',
    //                           borderWidth: 2
    //                         },
    //                         label: {
    //                           show: false,
    //                           position: 'center'
    //                         },
    //                         emphasis: {
    //                           label: {
    //                             show: true,
    //                             fontSize: 40,
    //                             fontWeight: 'bold'
    //                           }
    //                         },
    //                         labelLine: {
    //                           show: false
    //                         },
    //                         data: jsonObj
    //                       }
    //                     ]
    //                   };
    //           oPie.setOption(oPieopt);
    //
    //         },
    //         'json'
    // );

    $.post(
            '/echarts?method=selectOrderBrandCount',
            function (jsonObj) {
              console.log(jsonObj);

              var xArray = new Array();
              var yArray = new Array();
              for (var OrderBrandCountVo of jsonObj) {
                xArray.push(OrderBrandCountVo.name);
                yArray.push(OrderBrandCountVo.value);
              }

              var oColumn = echarts.init(document.getElementById('column_show'));
              var oColumnopt =
                      {
                        title: {
                          text: '各类车辆品牌订单数量'
                        },
                        tooltip: {
                          trigger: 'item'
                        },
                        xAxis: {
                          data: xArray
                        },
                        yAxis: {},
                        series: [
                          {
                            name: '订单量',
                            type: 'bar',
                            data: yArray,
                            itemStyle: {
                              normal: {
                                color: function(params) {
                                  var colorList = [
                                    '#FF0000', '#00FF00', '#0000FF', '#FFFF00',
                                    '#FF00FF', '#00FFFF', '#FF8000', '#8000FF',
                                    '#00FF80', '#FF0080', '#80FF00', '#0080FF',
                                    '#FFC0C0', '#C0FFC0', '#C0C0FF', '#FFFF80',
                                    '#FF80FF', '#80FFFF', '#FFA500', '#A500FF',
                                    '#00FFA5', '#FF00A5', '#A5FF00', '#00A5FF',
                                    '#FFD700', '#D700FF', '#00FFD7', '#FF00D7',
                                    '#D7FF00', '#00D7FF', '#FF7F50', '#7F50FF',
                                    '#50FF7F', '#FF507F', '#7FFF00', '#007FFF',
                                    '#FF4500', '#4500FF', '#00FF45', '#FF0045',
                                    '#45FF00', '#0045FF', '#FF1493', '#1493FF',
                                    '#00FF14', '#FF0014', '#14FF00', '#0014FF',
                                    '#FF69B4', '#69B4FF', '#B4FF69', '#FFB469',
                                    '#69FFB4', '#B469FF'
                                  ];
                                  return colorList[params.dataIndex % colorList.length];
                                }
                              }
                            }
                          }
                        ]
                      };
              oColumn.setOption(oColumnopt);
            },
            'json'
    );



  </script>
</body>

</html>